<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>display</title>

        <style type="text/css">

            .wrapper { border: 1px solid blue ; margin: 25px ; padding: 15px ; }

            .first>span {
                display: inline ; /* 内联 或 行内 */
                /* 对于内联元素来说，直接设置其 宽度 和 高度 是无效的*/
                width: 100px ; /* 对于内联元素来说是无效的 */
                height: 30px ; /* 对于内联元素来说是无效的 */
                line-height: 30px ; /* 有效！因为行高是针对文本的不是针对元素的 */
                border: 1px solid red ;
            }

            .second>span {
                display: inline-block ; /* 内联块 或 行内块 */
                text-align: center ;
                width: 100px ; /* 对于内联块来说，宽度 和 高度 都是有效的 */
                height: 30px ; /* 对于内联块来说，宽度 和 高度 都是有效的 */
                line-height: 30px ;
                border: 1px solid red ;
            }

            .third>span {
                display: block ; /* 块 */
                text-align: center ;
                width: 100px ; /* 对于内联块来说，宽度 和 高度 都是有效的 */
                height: 30px ; /* 对于内联块来说，宽度 和 高度 都是有效的 */
                line-height: 30px ;
                border: 1px solid red ;
            }

            .fourth { display: none ; }

        </style>

    </head>
    <body>

        <div class="wrapper first">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>

        <div class="wrapper second">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>10</span>
            <span>11</span>
            <span>12</span>
            <span>13</span>
        </div>

        <div class="wrapper third">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>

        <div class="wrapper fourth"></div>

        <p class="wrapper">
            时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。
            俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。
            层峦耸翠，上出重霄；飞阁流丹，下临无地。
            鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
        </p>
        
    </body>
</html>